<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>忘记密码</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
    <!-- 自定义css文件   -->
    <link rel="stylesheet" href="../src/js/dalao/css/forget-the-password.css">
    <!-- Vue 简化交互 轻量级框架-->
    <script src="../src/js/vue.js"></script>
    <!-- Jquery 简化js开发 -->
    <script src="../src/js/jquery.min.js"></script>
    <!-- BootStrap 网页构建-->
    <script src="../src/js/bootstrap.min.js"></script>
    <!-- Popper工具提示与弹出框-->
    <script src="../src/js/popper.min.js"></script>
    <!-- Appear 跟踪dom元素的可见性，并在用户定义的回调出现和消失时触发用户定义的回调 -->
    <script src="../src/js/jquery.appear.js"></script>
    <!-- 基于Jquery倒计时插件 -->
    <script src="../src/js/countdown.min.js"></script>
    <!-- Waypoints 滚动监听插件 -->
    <script src="../src/js/waypoints.min.js"></script>
    <!--  Counterup  数字动画插件-->
    <script src="../src/js/jquery.counterup.min.js"></script>
    <!-- Wow 允许用户滚动页面的时候展示 CSS 动画 -->
    <script src="../src/js/wow.min.js"></script>
    <!-- Apexcharts JavaScript图表库 -->
    <script src="../src/js/apexcharts.js"></script>
    <!-- Select2  支持搜索、标签、远程数据、无限滚动等 下拉框组件 -->
    <script src="../src/js/select2.min.js"></script>
    <!-- Owl Carousel 幻灯片插件 -->
    <script src="../src/js/owl.carousel.min.js"></script>
    <!-- Magnific Popup 响应式弹出层和对话框插插件 -->
    <script src="../src/js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar 列表项平滑滚动插件 -->
    <script src="../src/js/smooth-scrollbar.js"></script>
    <!-- lottie 动画插件 -->
    <script src="../src/js/lottie.js"></script>
    <!-- Chart Custom 图表插件 -->
    <script src="../src/js/chart-custom.js"></script>
    <!-- Custom wordpress插件 -->
    <script src="../src/js/custom.js"></script>
    <!--    自定义js文件-->
    <script src="../src/js/dalao/js/forget-the-password.js"></script>
</head>
<body>
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper" id="forgetThePasswordController">
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10 col-lg-10">
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title">重置密码</h4>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <form id="form-wizard1" class="text-center mt-4">
                                <ul id="top-tab-list" class="p-0" style=" margin: 0 -10px 100px 95px;width: 115%;">
                                    <li class="active" id="account">
                                        <a v-if="ClickSate===false" v-on:click="view(1)" v-bind:style="ActiveAStyle">
                                            <i v-bind:style="ActiveAIStyle"
                                               class="ri-lock-unlock-line"></i><span>账户</span>
                                        </a>
                                        <a v-if="ClickSate===true" v-bind:style="ActiveAStyle">
                                            <i v-bind:style="ActiveAIStyle"
                                               class="ri-lock-unlock-line"></i><span>账户</span>
                                        </a>
                                    </li>
                                    <li id="personal">
                                        <a v-if="ClickSate===false" v-on:click="nx1()" v-bind:style="PersonalAStyle">
                                            <i v-bind:style="PersonalAIStyle" class="ri-user-fill"></i><span>个人</span>
                                        </a>
                                        <a v-if="ClickSate===true" v-bind:style="PersonalAStyle">
                                            <i v-bind:style="PersonalAIStyle" class="ri-user-fill"></i><span>个人</span>
                                        </a>
                                    </li>
                                    <li id="confirm">
                                        <a v-if="ClickSate===false" v-on:click="nx2()&countDown()"
                                           v-bind:style="ConfirmAStyle">
                                            <i v-bind:style="ConfirmAIStyle" class="ri-check-fill"></i><span>完成</span>
                                        </a>
                                        <a v-if="ClickSate===true" v-bind:style="ConfirmAStyle">
                                            <i v-bind:style="ConfirmAIStyle" class="ri-check-fill"></i><span>完成</span>
                                        </a>
                                    </li>
                                </ul>
                                <div v-show="Template1">
                                    <!-- fieldsets -->
                                    <fieldset>
                                        <div class="form-card text-left">
                                            <div class="row">
                                                <div class="col-7">
                                                    <h3 class="mb-4">账户信息:</h3>
                                                </div>
                                                <div class="col-5">
                                                    <h2 class="steps" v-if="ErrorState!=='连接超时'">步骤 1 - 3</h2>
                                                    <h2 class="steps" v-if="ErrorState==='连接超时'"
                                                        v-bind:style="ErrorStyle">{{ ErrorState }}</h2>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="username">用户名: <span
                                                                v-bind:style="UsernameTipsStyle">*</span></label>
                                                        <input type="hidden" v-bind:value="UserId">
                                                        <input type="text" class="form-control" name="uname"
                                                               id="username" autocomplete
                                                               placeholder="UserName" v-bind:title="UsernameMessage"
                                                               v-bind:placeholder="UsernamePlaceholder"
                                                               v-bind:style="UsernameStyle" v-model="Username"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="password">新密码:
                                                        <span v-bind:style="PasswordTipsStyle">*</span>
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="password" class="form-control" name="pwd"
                                                               id="password"
                                                               placeholder="Password" v-bind:title="PasswordMessage"
                                                               v-bind:placeholder="PasswordPlaceholder"
                                                               v-bind:style="PasswordStyle" v-model="Password">

                                                        <span v-on:mousedown="eye()" v-if="EyeState===true"
                                                              class="iq-icons-list ion-eye-disabled form-control-feedback"></span>
                                                        <span v-on:mouseup="eye()" v-if="EyeState===false"
                                                              class="iq-icons-list ion-eye form-control-feedback"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" name="next"
                                                    class="btn btn-primary action-button float-right next" value="Next"
                                                    v-on:click="nx1()">下一个
                                            </button>
                                        </div>
                                    </fieldset>
                                </div>
                                <div v-show="Template2">
                                    <fieldset>
                                        <div class="form-card text-left">
                                            <div class="row">
                                                <div class="col-7">
                                                    <h3 class="mb-4">个人信息:</h3>
                                                </div>
                                                <div class="col-5">
                                                    <h2 class="steps">步骤 2 - 3</h2>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">

                                                    <div class="form-group">
                                                        <label for="name">名字: <span
                                                                v-bind:style="NameTipsStyle">*</span></label>
                                                        <input type="text" class="form-control" name="name"
                                                               v-bind:title="NameMessage" v-model="Name"
                                                               v-bind:style="NameStyle" autocomplete
                                                               v-bind:placeholder="NamePlaceholder"
                                                               id="name" required="required"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div v-show="State1">
                                                        <label for="phone">联系电话: <span
                                                                v-bind:style="PhoneTipsStyle">*</span></label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="phone"
                                                                   v-bind:style="PhoneStyle"
                                                                   v-bind:placeholder="PhonePlaceholder"
                                                                   v-bind:title="PhoneMessage" v-model="Phone"
                                                                   required="required" autocomplete
                                                                   onkeyup="value=value.replace(/[^\d]/g,'')"
                                                                   maxlength="11" id="phone"/>
                                                        </div>
                                                    </div>
                                                    <div v-show="State2">
                                                        <label for="phoneCode">验证码: <span
                                                                v-bind:style="PhoneCodeTipsStyle">*</span>
                                                        </label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="phoneCode"
                                                                   v-bind:style="PhoneCodeStyle"
                                                                   v-bind:placeholder="PhoneCodePlaceholder"
                                                                   v-bind:title="PhoneCodeMessage" v-model="PhoneCode"
                                                                   required="required" autocomplete
                                                                   maxlength="6" id="phoneCode"/>
                                                            <button type="button" name="previous" id="nextCode"
                                                                    class="btn btn-info previous action-button-previous float-right"
                                                                    value="Previous"
                                                                    v-on:click="SendVerificationCode(false)">
                                                                再发一次
                                                                <span v-show="PhoneCodeButtonState===true">
                                                                    {{ PhoneCodeSend }}
                                                                </span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" name="previous" v-show="ButtonState===true"
                                                class="btn btn-info previous action-button-previous float-right"
                                                value="Previous"
                                                v-on:click="SendVerificationCode(true)">发送验证码
                                        </button>
                                        <button type="button" name="next" v-show="ButtonState===false"
                                                class="btn btn-primary next action-button float-right" value="Next"
                                                v-on:click="nx2()">提交
                                        </button>
                                        <button type="button" name="previous"
                                                class="btn btn-dark previous action-button-previous float-right mr-3"
                                                value="Previous" v-on:click="view(1)">上一个
                                        </button>
                                    </fieldset>
                                </div>
                                <div v-show="Template3">
                                    <fieldset>
                                        <div class="form-card">
                                            <div class="row">
                                                <div class="col-7">
                                                    <h3 class="mb-4 text-left">状态:</h3>
                                                </div>
                                                <div class="col-5">
                                                    <h2 class="steps">步骤 3 - 3</h2>
                                                </div>
                                            </div>
                                            <br><br>
                                            <h2 v-if="Message===true" class="text-success text-center"><strong>成功 !
                                                即将登录&nbsp;({{ Second }}min)</strong></h2>
                                            <h2 v-else class="text-danger text-center"><strong>失败 ! 请检查信息</strong></h2>
                                            <br>
                                            <div class="row justify-content-center">
                                                <div class="col-3">
                                                    <a href="sign-in.html" v-if="Message===true"><img
                                                            src="../src/images/page-img/img-success.png"
                                                            class="fit-image" title="点击跳转登录"
                                                            alt="fit-image" style="width: 50%;"></a>
                                                </div>
                                            </div>
                                            <br/><br/>
                                        </div>
                                    </fieldset>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<!-- Footer -->
<footer class="bg-white iq-footer" style="margin-left: 0px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <ul class="list-inline mb-0">
                    <li class="list-inline-item"><a href="privacy-policy.html">隐私政策</a></li>
                    <li class="list-inline-item"><a href="terms-of-service.html">使用条款</a></li>
                </ul>
            </div>
            <div class="col-lg-6 text-right">
                版权所有2020 <a href="#">DaLao</a> 保留所有权利。
            </div>
        </div>
    </div>
</footer>
</body>
</html>